<template>
  <div>
    <!-- v-model可以双向绑定数据，数据可以驱动视图，视图中的数据发生变化也能够影响data中的数据 -->
    <!-- 注意：v-model会忽略掉一些默认自带属性比如value，checked -->

    <!-- <input type="text"  :value="msg" @input='changeHTML'> -->

    <form @submit.prevent="login">
        <input type="text" name="username" v-model.trim.lazy="form.username">

        <input type="text" name="password" v-model.number.trim="form.password" value="123">

        <input type="checkbox" checked v-model="form.flag">

        <button>提交</button>
    </form>
   </div>
</template>
 
<script>
export default {

  data() {
    return {
        msg:'杭州的第一场雪',

        form:{
            username:'',
            password:'',
            flag:false
        }
    };
  },

  methods: {
    login(e) {
        e.preventDefault()
        console.log(this.form.username);
        console.log(this.form.password);
    },
    changeHTML(e) {
        console.log(e.target.value);
        this.msg = e.target.value
    }
  }
};
</script>

<style scoped>
     
</style>